<template>
	<div class="layout-container main-desktop">
		<div class="sys-menu-right">
			<Tooltip placement="bottom" :content="account.displayName" transfer>
				<Avatar icon="ios-person" :src="avatar" size="large"></Avatar>
			</Tooltip>
			<Tooltip placement="bottom" :content="$t('info.buttons.theme.window')" transfer>
				<Button icon="md-swap" shape="circle" @click="onSwitchDesktop"></Button>
			</Tooltip>
			<Tooltip placement="bottom" :content="fulltype" transfer>
				<Button :icon="icontype" shape="circle" @click="changeFullScreen"></Button>
			</Tooltip>
			<Tooltip placement="bottom" :content="$t('info.buttons.home')" transfer>
				<Button icon="ios-home" shape="circle" @click="onHomeClick"></Button>
			</Tooltip>
			<Tooltip placement="bottom" :content="$t('info.buttons.profile')" transfer>
				<Button icon="md-settings" shape="circle" @click="showProfile"></Button>
			</Tooltip>
			<Tooltip placement="bottom-end" :content="$t('info.buttons.exit')" transfer>
				<Button icon="md-log-out" shape="circle" @click="exit"></Button>
			</Tooltip>
		</div>
		<MenuBar :buttons="menus" @on-menu-click="onMenuButtonClick"></MenuBar>
	</div>
</template>
<script type="text/javascript">
import { Button, Tooltip, Avatar, Icon } from 'view-design';
import { extend, each, profile, exit, createWindow } from 'config/utils';
import { EMBED_QIANKUN, EMBED_IFRAME, LINK_SELF, LINK_BLANK } from 'config/utils';
import { MenuBar } from 'cloudbase-components';

var home = null;

export default {
	name: "ThemeWindow",
	data() {
		return {
			menus: []
		};
	},
	computed: {
		avatar() {
			return this.$store.state.avatar;
		},
		account() {
			return this.$store.state.account;
		},
		omenus() {
			return this.$store.state.menus;
		},
		icontype() {
			 return this.$store.state.fullscreen ? 'md-contract' : 'md-expand';
		},
		fulltype() {
			return this.$store.state.fullscreen ? this.$t('info.buttons.fullscreen.recover') : this.$t('info.buttons.fullscreen.full');
		}
	},
	methods: {
		
		onSwitchDesktop() {
			this.$store.commit("setTheme", "normal");
		},
		changeFullScreen() {
			this.$store.commit("changeFullscreen");
		},
		showProfile() {
			profile();
		},
		exit() {
			exit();
		},
		onHomeClick() {
			if(home) {
				home.toTop();
				return;
			}
			createWindow({
				title: this.$t("home.title"),
				router: "/home",
				mask: false,
				onGetFrame(frame) {
					home = frame;
				},
				onFrameClose() {
					home = null;
				}
			});
		},
		onMenuButtonClick(menu, index) {
			if(menu.menuType == LINK_SELF) {
				window.location.href = menu.router;
				return;
			}
			if(menu.menuType == LINK_BLANK) {
				window.open(menu.router);
				return;
			}
			this.openWindow(this.omenus[index], {
				menu, 
				isOn() {
					return this.menu.active;
				},
				on() {
					this.menu.active = true;
				},
				off() {
					this.menu.active = false;
				}
			});
		},
		openWindow(menu, active = {on() {}, off() {}, isOn() {return false}}) {
			if(active.isOn()) {
				return;
			}
			active.on();
			if(menu.router) {
				if(menu.frame) {
					menu.frame.toTop();
					active.off();
				} else {
					createWindow({
						title: menu.i18n ? this.$t(menu.i18n) : menu.name,
						router: menu.router,
						embed: menu.menuType,
						mask: false,
						onGetFrame(frame) {
							active.off();
							menu.frame = frame;
						},
						onFrameClose() {
							menu.frame = null;
						}
					});
				}
			} else {
				if(menu.children) {
					var me = this;
					createWindow({
						router: "/sys/more",
						header: false,
						mask: true,
						maskClose: true,
						transparent: true,
						resizable: false,
						width: 800,
						height: 480,
						params: menu.children,
						callback(child, index) {
							me.openWindow(child);
						},
						onGetFrame(frame) {
							active.off();
						}
					});
				}
			}
		}

	},
	mounted() {
		each(this.omenus, (item, index) => {
			var menu = {
				active: false
			}
			extend(menu, item);
			menu.name = item.i18n ? this.$t(item.i18n) : item.name;
			this.menus.push(menu);
		});
		this.$nextTick(() => {
			this.onHomeClick();
		});
	},
	components: {
		MenuBar,
		Tooltip,
		Avatar,
		Icon,
		Button
	}
}
</script>
<style type="text/css" scoped>
div.main-desktop {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    background-color: #1296db;
}
/***************右上方按钮位置********************/
div.main-desktop>div.sys-menu-right {
    position: absolute;
    right:0.5rem;
    top: 0.5rem;
    height: 42px;
    line-height: 42px;
}
</style>